<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>forget_password</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 20px auto 0px auto;
			}
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			.mui-input-group label {
				width: 30%;
			}
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 70%;
			}
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			.mui-content-padded {
				margin-top: 25px;
				margin-bottom: 25px;
			}
			.mui-btn {
				padding: 10px;
			}
			.mui-content{
				background-color:rgb(117,195,235);
			}
			
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">找回密码</h1>
		</header>	
		<div class="mui-content">
			<div class="mui-content-padded" style="height:55vw;background-image:url(img/log_education.png);background-size: 100%;margin: 10px 10px;"></div>
			<form class="mui-input-group">
				<div class="mui-input-row">
					<label>用户账号:</label>
					<input id='u_username' type="text" class="mui-input" maxlength="16" placeholder="请输入账号">
				</div>
			</form>
			<div id="username_btn"  class="mui-content-padded">
				<button id='forget_username' class="mui-btn mui-btn-block mui-btn-primary">确认账号</button>
			</div>
			<form id="answer_table" class="mui-input-group" style="display: none;">
				
				<div class="mui-input-row">
					<label>密保问题:</label>
					<h4 id='u_question' style="line-height: 140%;width: 70%;float: right;">你的问题？</h4>
				</div>
				<div class="mui-input-row">
					<label>密保答案:</label>
					<input id='u_answer' type="text" class="mui-input-clear mui-input" maxlength="10" placeholder="请输入答案">
				</div>
				<div class="mui-input-row">
					<label>新的密码</label>
					<input id='u_password' type="password" class="mui-input-password" maxlength="16" placeholder="请输入密码（8~16位）">
				</div>	
				<div class="mui-input-row">
					<label>确认密码</label>
					<input id='password_confirm' type="password" class="mui-input-clear mui-input" maxlength="16" placeholder="请重新输入密码">
				</div>
			</form>
			<div id="answer_table_btn"  class="mui-content-padded" style="display: none;">
				<button id='forget_password' class="mui-btn mui-btn-block mui-btn-primary">确   认</button>
			</div>
			<div id="change_username_div"  class="mui-content-padded" style="display: none;">
				<button id='change_username_btn' class="mui-btn mui-btn-block mui-btn-primary">更换账号</button>
			</div>
		</div>		
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script src="js/DHJ.js"></script>
		<script>
			//mui初始化
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var uQuestion = "";
			//确认账号
			document.getElementById("forget_username").addEventListener('tap',function(){
				var u_username = document.getElementById('u_username').value;
				if(u_username.length<1){
					mui.alert("请输入账号");
				}else{
					mui.ajax({
						url:locationIP+'getQuestion',
						data:{
							username:u_username
						},
						dataType:'json',
						type:'post',
						success:function(data){
							//查看获取的数据状态
							console.log(JSON.stringify(data));
							if(data==null){
								mui.alert("无此用户");
								uQuestion="";							
								document.getElementById("u_question").innerHTML="你的问题？";
							}else{
								uQuestion=data.uQuestion;								
								document.getElementById("u_question").innerHTML=uQuestion;
								document.getElementById("answer_table").style.display='block';
								document.getElementById("answer_table_btn").style.display='block';
								document.getElementById("change_username_div").style.display='block';
								document.getElementById("username_btn").style.display='none';
								document.getElementById('u_username').readOnly=true;
							}										
						},
						error: function(xhr,type,errorThrown){
			                mui.toast(type);
			            }
					});
				};
			});
			//确认修改密码
			document.getElementById("forget_password").addEventListener('tap', function() {				
				var u_username = document.getElementById('u_username').value;
				var u_password = document.getElementById('u_password').value;
				var password_confirm = document.getElementById('password_confirm').value;
				var u_answer = document.getElementById('u_answer').value;
				if (u_username.length<1) {
					mui.alert('请输入账号');
				}else if (u_answer.length<1) {
					mui.alert('请输入答案');
				}else if (u_password.length<8) {
					mui.alert('你的密码不足8位');
				}else if (u_password != password_confirm) {
					mui.alert('两次密码不一致');
				}else{
					mui.ajax({
						url:locationIP+'changeAnswer',
						data:{
							username:u_username,
							pwd:u_password,
							uAnswer:u_answer
						},
						dataType:'json',
						type:'post',
						success:function(data){
							//查看获取的数据状态
							console.log(JSON.stringify(data));
							if(data>0){
								mui.alert("密码修改成功",function(){
									mui.openWindow({
										url:'index.html',
										id:'index.html'				
									});
								});
							}else{
								mui.alert("答案错误");
							};
							
						},
						error: function(xhr,type,errorThrown){
			                mui.toast(type);
			            }						
					});				
				}		
			});
			//更换账号
			document.getElementById("change_username_btn").addEventListener('tap', function() {
				document.getElementById("answer_table").style.display='none';
				document.getElementById("answer_table_btn").style.display='none';
				document.getElementById("change_username_div").style.display='none';
				document.getElementById("username_btn").style.display='block';
				document.getElementById('u_username').readOnly=false;
				document.getElementById('u_username').value="";
				uQuestion="";
			});
			
		</script>
	</body>

</html>